<template>
  <Modal class="edit-deptnode-modal" :width="'60%'" v-model="model" @on-cancel='onCancel'>
    <p slot="header" >
      <Icon type="ios-information-circle"></Icon>
      <span>编辑节点</span>
    </p>
    <div class="ht400 scroll">
      <Form :model="form" :label-width="100" ref="ruleForm" :rules="rules">
        <FormItem label="子节点名称:" prop="name">
          <Input v-model="form.name" placeholder="请输入节点名称"/>
        </FormItem>
        <FormItem label="父节点名称:">
          <Select v-model="form.parentId" disabled>
              <Option v-for="item in departmentList" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </FormItem>
      </Form>
      <div>
        <Table stripe height='250' :columns="list.columns" :data="list.data"></Table>
        <div class="mt tr pr">
          <Page
            :total="list.totalItem"
            :page-size='20'
            show-total
            @on-change="onPageChange"
            />
        </div>
      </div>
    </div>
    <div slot="footer">
      <Button  size="large" type="text" @click="onCancel">取消</Button>
      <Button type="error" size="large" @click="removeDepart">删除此部门</Button>
      <Button type="info" size="large" @click="moveDepartDistributor">移动此部门经销商</Button>
      <Button type="primary" size="large" @click="onDone">保存</Button>
    </div>
    <MoveDistributor ref="moveDistributor" @successMove='getDistributorData' />
    <Loader :status="list.status" @refresh="getDistributorData"></Loader>
  </Modal>
</template>
<script>
import MoveDistributor from './MoveDistributor'
export default {
  components: {
    MoveDistributor
  },
  props: {
  },
  created () {
  },
  data() {
    return {
      id: '',
      model: false,
      form: { parentId: '0', name: '' },
      rules: {
        name: [{ message: '请输入节点名称', trigger: 'blur', required: true }]
      },
      loading: false,
      height: '',
      departmentList: [],
      list: {
        status: 'pass',
        totalItem: 1,
        pageSize: window.$pageSize,
        currentPage: 1,
        form: {
          companyname: '',
        },
        columns: [
          { title: '联系人', key: 'distributorContactName', align: 'left' },
          { title: '手机号', key: 'distributorContactPhone', align: 'left' },
          { title: '经销商名', key: 'distributorName', align: 'left', },
        ],
        data: []
      }
    }
  },
  methods: {
    getDistributorData() {
      let param = {
        current: this.list.currentPage,
        size: this.list.pageSize,
        departId: this.form.id,
      };
      this.list.status = "loading";
      this.$jsonPost('/department/queryDistributorDepartment', param).then(data => {
        this.list.totalItem = Number(data.total);
        this.list.data = (data.records || []);
        this.list.status = "pass";
      })
      .catch(() => {
        this.list.status = "error";
      });
    },
    onPageChange(number) {
      this.list.currentPage = number;
      this.getDistributorData();
    },
    open(data) {
      this.form = data
      this.getDistributorData()
      this.getData()
      this.model = true
    },
    onCancel() {
      this.close()
      this.$emit('cancel', {}, {}, this.form)
    },
    onDone() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          // 在外部接口成功在自行调close函数，关闭弹窗
          this.$emit('confirm', {}, {}, this.form)
        }
      })
    },
    close() {
      this.model = false
    },
    getData () {
      this.$jsonPost('/department/listDepartmentTree').then(res => {
          const loop = (res) => {
            res.forEach(item => {
                item.expand = false
                item.label = item.name
                if (item.children) {
                  delete item.children
                }
            })
          }
          loop(res)
          this.departmentList = res
      })
    },
    onTreeSelect() {},
    removeDepart() {
      this.$Modal.confirm({
          title: '业务部门-删除',
          content: '<p>您确定要删除此部门？若含子分组会被一并删除</p>',
          onOk: () => {
            this.$jsonPost(`/department/delete_department`, { departmentId: this.form.id }).then(res => {
              this.$Notice.success({
                title: '删除成功'
              })
              this.$emit('removeDepart', this.form)
              this.close()
            })
          }
      });
    },
    moveDepartDistributor() {
      this.$refs.moveDistributor.open(this.form.id)
    }
  }
}
</script>

